<template>
    <div id="workerSalary">
        <!-- 搜索表单-->
        <div id = "operator">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="开始时间">
                    <el-date-picker v-model="searchForm.beginTime" type="datetime" placeholder="选择开始日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="选择开始日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="送水类型" placeholder = "请选择送水类型">
                    <el-select v-model="searchForm.type" >
                        <el-option v-for="option in this.options" :key ="option.value" :label="option.label" :value="option.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
      <!-- 计算工资列表 -->
      <div id="workerSalaryList">
        <el-table :data="workerSalaryList" stripe style="width: 100%">
            <el-table-column  type = "index"></el-table-column>
            <el-table-column  prop = "workerName" label="送水工名称" align="center"></el-table-column>
            <el-table-column label="送水工底薪" align="center"> 
                <template #default="scope">
                     <el-button type="primary" @click="addWorkerSalary(scope.row.workerName,scope.row.workerSalary)">+</el-button>
                        {{scope.row.workerSalary}}
                     <el-button type="danger" @click="subWorkerSalary(scope.row.workerName,scope.row.workerSalary)">-</el-button>
                </template>
            </el-table-column>
            <el-table-column  prop = "workerMoney" label="送水提成" align="center"></el-table-column>
            <el-table-column  label="送水数量" align="center">
                <template v-slot="scope">
                    <!-- 条件成立：送水数量不为空，正常显示送水数量。否则：送水数量为0 -->
                    {{scope.row.sendWaterCount ? scope.row.sendWaterCount : 0}}
                </template>
            </el-table-column>
            <el-table-column label="实发工资" align="center">
                   <template v-slot="scope">
                    <!-- 条件成立：最终工资不为空，正常显示最终工资。否则：送水工底薪就是最终工资 -->
                        {{scope.row.finalSalary ? scope.row.finalSalary : scope.row.workerSalary}}
                   </template>
            </el-table-column>
      </el-table>
    </div>
  
      <!-- 分页组件 -->
      <div id="page">
        <!-- 
          @size-change 每页条数发送变化事件  重要
          @current-change 当前页码发生变化事件 重要
          current-page属性表示当前页码 重要
          page-sizes 每页条数数组
          page-size 每页条数 重要
          layout 分页组件布局
          total 总记录数 重要
         -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 3, 5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  import moment from 'moment'
  export default {
      data() {
          return {
              // 存储后端响应的“送水工工资列表”
              workerSalaryList: [],
              pageNum: 1,
              pageSize: 5,
              total: 0,
              searchForm: {
                beginTime: '',
                endTime: '',
                type: '', // 新增加
            },
            // 新增加送水类型选项
            options: [
                {
                    value: "1",
                    label: '已送水'
                },
                {
                    value: "2",
                    label: '未送水'
                }
            ]
          }
      },
      methods: {
        
          handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.pageSize = val;
              this.pageNum = 1;
              this.listWorkerSalaryByPage();
          },
          /**
           * 当前页码发生改变的事件处理函数
           * 步骤：
           * 1 将val参数赋值给pageNum（注意：val表示最新的当前页码）
           * 2 重新查询送水工工资列表信息
           */
          handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
              this.pageNum = val;
              this.listWorkerSalaryByPage();
          },
          subWorkerSalary(id,workerSalary) {
            console.log("sub worker salary ",id,'---',workerSalary);
            workerSalary -= 100;
            this.adjustWorkerSalary(id,workerSalary);
          },
          addWorkerSalary(id, workerSalary) {
            console.log("add worker salary ",id,'---',workerSalary);
            workerSalary += 100;
            this.adjustWorkerSalary(id,workerSalary);
          },
          /**
           * 使用axios向后端发起计算工资请求
           */
          listWorkerSalaryByPage() {
              this.$axios.post('http://localhost:8091/account/salaryList',{
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  params:{
                    beginTime:this.searchForm.beginTime,
                    endTime:this.searchForm.endTime,
                    type:this.searchForm.type
                  }                
              })
              .then(resp=>{
                  const code = resp.data.code;
                  // 条件成立：表示后端响应成功，获取后端返回的送水工工资列表和总条数
                  if (code === 200) {
                      this.workerSalaryList = resp.data.data.records;
                      this.total = resp.data.data.total;
                  } else {
                      this.$message.error("没有查询到送水工的工资");
                  }
              })
              .catch(err=>{
                  this.$message.error("统计工资请求失败",err);
                  console.log("统计工资请求失败",err);
              })
          },
        adjustWorkerSalary(id,workerSalary) {
            this.$axios.post('http://localhost:8091/account/adjustWorkerSalary',{
                    "workerName": id,
                    "workerSalary": workerSalary

            }).then(resp=>{
                console.log(resp);
                const code = resp.data.code;
                // 条件成立：调整工资成功，否则调整工资失败
                if (code === 200) {
                    this.listWorkerSalaryByPage();
                    this.$message.success("调整工资成功");
                } else {
                    this.$message.success("调整工资失败");
                }
            }).catch(err=>{
                this.$message.error("调整工资请求发送失败：",err);
                console.log("调整工资请求发送失败：",err);
            })
        },
          onSearch(){
                // 条件成立：开始时间为空，给出错误提示信息并终止后续操作
                if (!this.searchForm.beginTime) {
                    this.$message.error("开始时间不能为空");
                    return ;
                }
                let endTime = this.searchForm.endTime;
                // 条件成立：结束时间为空，系统当前默认为结束时间
                if (!this.searchForm.endTime) {
                    let current = new Date();
                    this.searchForm.endTime = moment("yyyy-MM-DD").format(current);
                }
                this.pageNum = 1;
                this.listWorkerSalaryByPage();
            }
      },
      created() {
          this.listWorkerSalaryByPage()
      },    
  
  }
  </script>
  
  <style>
  
  </style>